<template>
	<view class="player-bar" @click="showFullPlayer()" @touchmove.stop="onTouchMove" @touchstart.stop="onTouchStart"
		@touchend.stop="onTouchEnd">
		<image class="playing-icon" :class="{ 'cover-animate-rotating': playerStore.status === MediaStatus.playing }"
			:src="playerStore.icyData?.cover || playerStore.currentRadio?.favicon" mode="aspectFill">
		</image>
		<view class="playing-info">
			<text class="playing-name">{{ playerStore.currentRadio?.name }}</text>
			<text>&nbsp;</text>
			<text class="playing-desc">{{ playerStore.icyData?.song || '暂无播放信息' }}</text>
		</view>
		<view class="player-controls">
			<!-- <text class="player-waiting" v-if="playerStore.status === MediaStatus.waiting">加载中</text> -->
			<!-- 播放/暂停/加载状态 -->
			<view class="player-play-pause" @click.stop="togglePlay">
				<view class="icon-container">
					<view class="loader-ring" v-if="isLoading"></view>
					<uni-icons fontFamily="iconfont" size="60rpx" color="#B829F7" :prop="playerStore.status">
						{{ playState }}
					</uni-icons>
				</view>
			</view>
		</view>
		<!-- <IcyFetcher :url="playerStore.currentRadio?.url" :playStatus="playerStore.status" @update="updateIcyData" /> -->
		<!-- <IcecastStatsFetcher :url="playerStore.currentRadio?.url" :playStatus="playerStore.status" @update="updateIcyData" /> -->

	</view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { icons, MediaStatus } from '@/common/const';
import { usePlayerStore } from '@/stores/usePlayerStore';
import IcyFetcher from '@/components/IcyFetcher/IcyFetcher.vue';
import IcecastStatsFetcher from '../IcyFetcher/IcecastStatsFetcher.vue';
import type { IcyData } from '@/common/types/interface';
import { showFullPlayer } from '@/common/station_api';
const playerStore = usePlayerStore();
const startX = ref(0);
const startY = ref(0);

const onTouchStart = (e: TouchEvent) => {
	startX.value = e.touches[0].clientX;
	startY.value = e.touches[0].clientY;
}
const onTouchMove = (e: TouchEvent) => {
	const deltaX = Math.abs(e.touches[0].clientX - startX.value);
	const deltaY = Math.abs(e.touches[0].clientY - startY.value);

	if (deltaX > deltaY) {
		// 横向滑动，阻止页面滚动
		e.preventDefault();
	}
}

const onTouchEnd = (e: TouchEvent) => {
	const endX = e.changedTouches[0].clientX;
	const deltaX = endX - startX.value;

	if (Math.abs(deltaX) > 50) {
		if (deltaX > 0) {
			console.log('👉 右滑,下一曲');
			playerStore.prev();
		} else {
			console.log('👈 左滑，上一曲')
			playerStore.next();
		}
	} else {
		console.log('🤏 滑动距离太短，可能是误触')
	}
}

const togglePlay = () => {
	if (playerStore.status === MediaStatus.playing) {
		playerStore.stop();
	} else {
		playerStore.play();
	}
};
const isLoading = computed(() => playerStore.status === MediaStatus.waiting);
const playState = computed(() => {
	return playerStore.status === MediaStatus.playing ? icons.pause : icons.play;
});

const updateIcyData = ({ song, cover }: IcyData) => {
	playerStore.icyData = { song, cover };
};


</script>

<style>
.player-bar {
	height: 100rpx;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	background: rgba(30, 30, 30, 0.3);
	/* border-top: 1px solid rgba(255, 255, 255, 0.1); */
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.cover-animate-rotating {
	animation: spin 3s linear infinite;
}

.playing-icon {
	width: 80rpx;
	height: 80rpx;
	box-shadow: 0 0 20rpx rgba(184, 41, 247, 0.3);
	border-radius: 50%;
	object-fit: cover;
}

.playing-info {
	flex: 1;
	margin-left: 20rpx;
}

.playing-name {
	font-size: 28rpx;
	color: #fff;
	margin-bottom: 4rpx;
}

.playing-desc {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.6);
}

.player-controls {
	display: flex;
	align-items: center;
	gap: 30rpx;
}



.icon-container {
	position: relative;
	width: 48rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loader-ring {
	position: absolute;
	width: 48rpx;
	height: 48rpx;
	border: 5rpx solid #ccc;
	border-top: 5rpx solid #29caf7;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	z-index: 1;
}
</style>